<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>树结构</title>
		<link href="../../../component/layui/css/layui.css" rel="stylesheet" />
		<link href="../../../admin/css/pear-tree/dtree.css" rel="stylesheet" />
		<link href="../../../admin/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
		<style>
			body {
				margin: 10px;
				background-color: whitesmoke;
			}
		</style>
	</head>
	<body>

		<div class="layui-row layui-col-space10">
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						嵌套数据格式
					</div>
					<div class="layui-card-body">
						<ul id="demoTree" class="dtree" data-id="0"></ul>
					</div>
				</div>
			</div>


			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						list集合
					</div>
					<div class="layui-card-body">
						<ul id="demoTree2" class="dtree" data-id="0"></ul>
					</div>
				</div>
			</div>
			
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						嵌套数据格式
					</div>
					<div class="layui-card-body">
						<ul id="demoTree3" class="dtree" data-id="0"></ul>
					</div>
				</div>
			</div>
			
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						list集合
					</div>
					<div class="layui-card-body">
						<ul id="demoTree4" class="dtree" data-id="0"></ul>
					</div>
				</div>
			</div>
		</div>
		<script src="../../../component/layui/layui.js"></script>
		<script>
			layui.use(['dtree', 'jquery'], function() {
				var $ = layui.jquery,
					dtree = layui.dtree;

				// 初始化树
				dtree.render({
					elem: "#demoTree",
					method: 'get',
					url: "../../../admin/data/dtree.json"
				});

				dtree.render({
					elem: "#demoTree2",
					method: 'get',
					url: "../../../admin/data/dataTree2.json",
					dataFormat: "list", //配置data的风格为list
					checkbar: true //开启复选框
				});


                dtree.render({
					elem: "#demoTree3",
					method: 'get',
					url: "../../../admin/data/dataTree2.json",
					dataFormat: "list", //配置data的风格为list
					checkbar: true //开启复选框
				});

                // 初始化树
                dtree.render({
                	elem: "#demoTree4",
                	method: 'get',
                	url: "../../../admin/data/dtree.json"
                });

				// 绑定节点点击
				dtree.on("node('demoTree')", function(obj) {
					layer.msg(JSON.stringify(obj.param));
				});

			});
		</script>
	</body>
</html>
